<script setup lang="ts">
import { hc } from "@/framework/vue/util/render.ts";
import { DeleteOutlined, MoreOutlined, ReloadOutlined } from "@ant-design/icons-vue";
import type { TaskItem } from "@/modules/dev-env/task/task-item.ts";
import { onMounted } from "vue";

const { task } = defineProps<{
  task: TaskItem;
}>();

onMounted(() => {
  task.start();
});

const progressStrokeColor = { from: "var(--color-primary)", to: "#87d068" };
</script>

<template>
  <div class="task-item-view">
    <div class="task-item-view-wrapper">
      <div class="flex-sb mb-5 col-gap-10 child-no-shrink">
        <b class="text-ellipsis flex-1" style="font-size: 13px">{{ task.name }}</b>
        <a-dropdown :trigger="['click']">
          <a-button :icon="hc(MoreOutlined)" size="small" type="text" />
          <template #overlay>
            <a-menu>
              <a-menu-item :icon="hc(ReloadOutlined)" @click="task.start()">重新运行</a-menu-item>
              <a-menu-item danger :icon="hc(DeleteOutlined)" @click="task.cancel()">取消任务</a-menu-item>
            </a-menu>
          </template>
        </a-dropdown>
      </div>

      <div :class="['task-item-state mb-5', task.isError && 'color-danger']">
        <span v-show="task.status?.desc">{{ task.status?.desc }}：</span>
        <i class="text-ellipsis flex-1" :title="task.status?.detail">{{ task.status?.detail }}</i>
      </div>
      <a-progress
        :percent="task.percent"
        :status="task.isError ? 'exception' : undefined"
        :stroke-color="progressStrokeColor"
        size="small"
        class="m0"
      />
      <div class="flex-sb col-gap-10 mt-5" v-if="task.processedDisplay || task.totalDisplay || task.speedDisplay">
        <div>
          <span>{{ task.processedDisplay }}</span>
          <span> / </span>
          <span>{{ task.totalDisplay }}</span>
        </div>
        <span class="flex-1"></span>
        <span>{{ task.speedDisplay }}</span>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
.task-item-view {
  background-color: var(--color-primary-bg);
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow1);
  padding: 10px;

  &-wrapper {
    overflow: hidden;
  }

  .task-item-state {
    font-size: 12px;
    display: flex;
    flex-wrap: nowrap;

    > * {
      flex-shrink: 0;
    }
  }

  + .task-item-view {
    margin-top: 10px;
  }
}
</style>
